import * as React from "react";
import * as ReactDOM from "react-dom";

import "./Login.less";
import url, {post} from "../../url";
import {AjaxModel} from "../../model/AjaxModel";
import Back from "../Components/Back/Back";

declare const wx: any;
declare const weui: any;

export interface LoginProps {
    params: any
}

export interface State {
    isShowPassword: boolean,
    username: string,
    password: string
}

export default class Login extends React.Component<LoginProps, State> {
    //默认属性
    static readonly defaultProps: LoginProps = {
        params: null
    };

    constructor(props: LoginProps) {
        super(props);
        //默认状态
        this.state = {
            isShowPassword: false,
            username: '',
            password: ''
        };
    }

    //组件挂载后回调
    componentDidMount() {
        document.title = "登陆";
    }

    onLogin = () => {
        console.log(this.props.params);
        if (!this.state.username || this.state.username.length > 11) {
            weui.alert('请正确输入用户名');
            return;
        }
        if (!this.state.password) {
            weui.alert('请输入密码');
            return;
        }
        post(url.apiLogin, {
            username: this.state.username,
            password: this.state.password
        }, (res: AjaxModel) => {
            if (res.code === 200) {
                localStorage.setItem('userInfo', JSON.stringify(res.data));
                localStorage.setItem('token', res.token);
                location.hash = '/user'
            } else {
                weui.alert(res.msg)
            }
        })
    };

    render() {
        return <div className="Login">
            <Back/>

            <div className="headimg">
                <i className="iconfont icon-touxiang"/>
            </div>

            <div className="main">
                <div className="username">
                    <i className="iconfont icon-zhanghao"/>
                    <input type="text" className="input" value={this.state.username}
                           maxLength={11}
                           placeholder={'请输入用户账号'}
                           onChange={(event) => {
                               this.setState({username: event.currentTarget.value})
                           }}/>
                    {this.state.username.length > 1 ? <i className="iconfont icon-delete" onClick={() => {
                        this.setState({username: ''})
                    }}/> : null}
                </div>
                <div className="password">
                    <i className="iconfont icon-mima"/>
                    <input type={`${this.state.isShowPassword ? "text" : "password"}`} className="input"
                           value={this.state.password}
                           placeholder={'请输入密码'}
                           onKeyDown={event1 => {
                               if (event1.keyCode === 13) this.onLogin()
                           }}
                           onChange={(event) => {
                               this.setState({password: event.currentTarget.value})
                           }}/>
                    <i className={`iconfont icon-${this.state.isShowPassword ? 'mimakejian' : 'mimabukejian'}`}
                       onClick={() => {
                           this.setState({isShowPassword: !this.state.isShowPassword})
                       }}/>
                </div>
            </div>

            <button className={'btn btn-login'} onClick={this.onLogin}>登陆</button>
            <button className={'btn-forget'} onClick={() => {
                location.hash = '#/alter-password'
            }}>忘记密码
            </button>
        </div>
    }
}
